<template>
	<view class="container">
		<img class="bcImg" src="../../static/demo_img/main/red2.jpg" />

		<view class="content" @scroll="onScroll" :class="{ 'up': mesUp }" v-if="useClan.clanMsg">
			<view class="tab">
				<u-tabs :list="list" :activeStyle="{
				            color: '#303133',
				            fontWeight: 'bold',
				            transform: 'scale(1.3)'
				        }" :inactiveStyle="{
				           color: '#303133',
				           fontWeight: 'bold',
				           transform: 'scale(1.3)'
				        }" lineWidth="30" lineColor="#c70a0a" itemStyle="padding-left: 40rpx; padding-right: 40rpx; height: 80rpx;"
					:is-scroll="false" @click="change"></u-tabs>
				<view class="chIcon" @click="changeUp">
					<u-icon name="photo" color="darkred" size="24" v-if="mesUp"></u-icon>
					<u-icon name="info" color="darkred" size="24" v-if="!mesUp"></u-icon>
				</view>

			</view>

			<scroll-view scroll-y="true" @scroll="onScroll" class="compentContent">
				<clanIntroduction v-if="currentComponent==='clanIntroduction'" />
				<!-- <clanCharitable v-if="currentComponent==='clanCharitable'" /> -->
				<!-- <clanShowcase v-if="currentComponent==='clanShowcase'" /> -->
			</scroll-view>

		</view>
		<view class="content" v-else>
			<view class="topContent">
				<!-- <button class="btnTurnSearch" @click="turnSearch"> -->
				<view class="needText">
					请先选择家族
				</view>
				<!-- </button> -->
				<view class="recommendText">
					根据你所在的地区<span style="color: darkred;">-{{useUser.userProfile.address}}-</span>推荐
				</view>
			</view>

			<scroll-view scroll-y="true" @scroll="onScroll" class="outcomeContent">
				<view class="outcome" v-if="outChoice">
					<view class="outcomeCard" v-for="(k,i) in outChoice" :key='k.id' @click="turnToClan(k.id)">
						<view>{{k.name}}</view>
						<view>{{k.place}}</view>
						<view>{{k.describe}}</view>
					</view>

					<button class="btnForMore" @click="turnSearch">
						搜索更多
					</button>
				</view>
				<view v-else>
					<view style="font-size: 40rpx;
					text-align: center;
					padding-top: 20px;">
						暂无该地区的族谱记录

					</view>
					<button class="btnForMore" @click="turnSearch">
						搜索更多
					</button>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<!-- 设置页面颜色 -->
<style>
	page {
		background-color: #f7c9af;
	}
</style>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		display: inline-box;
		position: relative;
		display: flex;
		justify-content: center;

		.bcImg {
			height: 30vh;
			width: 100%;
			position: absolute;
		}

		.content {
			background-color: #fbe6d6;
			margin-top: 25vh;
			position: absolute;
			width: 100vw;
			height: 75vh;
			display: flex;
			align-items: center;
			flex-direction: column;
			border-top-right-radius: 20px;
			border-top-left-radius: 20px;
			transition: 0.3s linear;
			overflow: hidden;

			//-------------------------------------------------------------
			.topContent {
				width: 100%;
				display: flex;
				padding-bottom: 20rpx;
				align-items: center;
				flex-direction: column;
				border-bottom: 6rpx darkred solid;

				.needText {
					margin-top: 30rpx;
					font-size: 40rpx;
					font-weight: 600;
					color: darkred;
				}

				.recommendText {
					margin-top: 20rpx;
				}
			}


			// .btnTurnSearch {
			// 	margin-top: 30rpx;
			// 	border: none;
			// 	padding: 9rpx;
			// 	background-color: darkred;
			// 	color: white;
			// 	font-weight: 500;
			// 	font-size: 40rpx;
			// 	display: flex;
			// 	align-items: center;
			// }

			.outcomeContent {
				width: 90%;
				height: 90%;
				display: flex;
				justify-content: center;
				align-items: center;

				.btnForMore {
					margin-top: 30rpx;
					border: none;
					height: 100rpx;
					width: 220rpx;
					background-color: darkred;
					color: white;
					font-weight: 500;
					font-size: 40rpx;
				}

				.outcome {
					margin-top: 20rpx;
					padding-bottom: 100rpx;
					width: 100%;
					display: flex;
					align-items: center;
					flex-direction: column;
					overflow: scroll;

					.outcomeCard {
						height: 300rpx;
						width: 90%;
						margin-top: 30rpx;
						border: 2rpx black solid;
					}

					.pageCase {
						margin-top: 40rpx;
						height: 100rpx;
						width: 100vw;


					}
				}
			}

			//-------------------------------------------------------------
			&.up {
				margin-top: 0vh;
				height: 100vh;
				transition: 0.3s linear;
				border-top-right-radius: 0px;
				border-top-left-radius: 0px;
			}

			.tab {
				position: fixed;
				background-color: #fbe6d6;
				width: 100%;
				z-index: 4;
				display: flex;
				height: 75rpx;
				justify-content: center;
				align-items: center;
				border-top-right-radius: 20px;
				border-top-left-radius: 20px;
				box-shadow: 2px 2px 2px rgba(0,0,0,0.3);

				&.up {
					transition: 0.3s linear;
					border-top-right-radius: 0px;
					border-top-left-radius: 0px;
				}

				.chIcon {
					position: absolute;
					bottom: -60rpx;
					right: 20rpx;
					border: 2px darkred solid;
					border-radius: 100%;
				}
			}

			.compentContent {
				width: 100%;
				height: 100%;
				margin-top: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0px;
				
			}


		}
	}
</style>

<script setup>
	import {
		ref,
		provide,
		nextTick,
		watch,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getClanTreeData
	} from '@/apis/clanTree.js'
	import {
		useUserStore
	} from '@/store/index.js'
	const useUser = useUserStore()
	import {
		useClanTreeStore
	} from '@/store/index.js'
	import {
		useClanStore
	} from '@/store/index.js'
	const useClan = useClanStore()
	const treeId = ref()
	import {
		getclanbyplace
	} from '@/apis/search.js'
	onShow(() => {
		treeId.value = useClan.clanId
		console.log(treeId.value, 'treeID', )
		searchClanFamily()
		console.log(treeId.value)
	})
	const pageSize = 3;
	const current = ref(1)
	const currentPage = ref(1)
	const total = ref(0);
	const outChoice = ref([])

	const searchClanFamily = () => {
		outChoice.value = null;
		total.value = 0;
		currentPage.value = 1;
		getclanbyplace({
			'page': currentPage.value,
			'size': pageSize,
			"name": '',
			"place": useUser.userProfile.address
		}).then(res => {
			//家族数组
			if (res.data) {
				outChoice.value = res.data.list
				total.value = res.data.total
			} else {
				uni.showToast({
					icon: 'none',
					duration: 22000,
					title: '族谱不存在'
				});
			}

		})
	}
	import clan from '@/apis/clan.js'
	const useTreeStore = useClanTreeStore()
	const turnToClan = (id) => {
		console.log(id)
		//标记web-view需要变化
		useTreeStore.clanTreeChange = true
		useClan.clanId = id;
		useTreeStore.clanTreeid = id

		clan.getClanMsg(useClan.clanId).then(res => {
			useClan.clanMsg = res.data
			clan.getClanItr(useClan.clanId).then(res => {
				console.log(res.data)
				useClan.clanItr = res.data
				treeId.value = useClan.clanId
				uni.switchTab({
					url: '../clan/clan'
				})
			})
		})
	}
	// 应用的组件
	import clanIntroduction from '../clan/clanCompents/clanIntroduction.vue'
	// import clanCharitable from '../clan/clanCompents/clanCharitable.vue'
	// import clanShowcase from '../clan/clanCompents/clanShowcase.vue'

	const list = ref([{
			name: '简介',
			component: 'clanIntroduction'
		},
		// {
		// 	name: '慈善',
		// 	component: 'clanCharitable'
		// }, {
		// 	name: '橱窗',
		// 	component: 'clanShowcase'
		// },
	])
	const currentComponent = ref('clanIntroduction')
	const scroll = ref(0)
	const mesUp = ref(false)
	const change = (item) => {
		console.log('item', item);
		currentComponent.value = item.component;
		if (currentComponent.value === 'clanTree') {
			mesUp.value = true;
		} else {
			mesUp.value = false;
		}
	}
	const onScroll = (event) => {
		console.log('scroll distance:', event.target.scrollTop)
		scroll.value = event.target.scrollTop;
		// 修改判断------------------------------------------------------------------------------
		if (scroll.value > 30) {
			mesUp.value = true;
		}
	}
	const changeUp = () => {
		mesUp.value = !mesUp.value
	}
	const turnSearch = () => {
		console.log("turnSearch")
		uni.redirectTo({
			url: '../../pages/index/search',
		});
	}
</script>